<template>
	<div class="certification">
		<!-- <so-header :seller="headerTitle"></so-header> -->
     <!-- <header class="mint-header">
       <div class="mint-header-button is-left">
         <a href="#/" class="router-link-active">
         <button class="mint-button mint-button--default mint-button--normal">
           <span class="mint-button-icon">
             <i class="mintui mintui-back"></i>
            </span> 
            <label class="mint-button-text"></label>
          </button>
         </a>
       </div>
       <h1 class="mint-header-title">实名认证</h1> 
         <div class="mint-header-button is-right">
            <a href="javascript:;" class="router-link-active">
            <button class="mint-button mint-button--default mint-button--normal y-skip-btn">
              <label class="mint-button-text">跳过</label>
              </button>
            </a>
          </div>
      </header> -->
      <setHeader title="实名认证" settext="跳过" @done="gotobtn()"></setHeader>
      <div class="pagecontent">
          <div class="y-Certification">
              <div style="border-bottom: 1px solid #f5f5f5; margin: 0 -0.2rem; padding: 0 0.2rem;">
                  <!-- <p class="compandy-notice">请上传(<label>{{companyName}}</label>)营业执照、机构代码证等</p> -->
                  <p class="compandy-notice">营业执照：</p>
                  <div  class="y-prompt"><span>仅支持JPG,JPEG和PNG格式，大小不超过5兆.文字应清晰可辨。企业名称必须与您填写的一致。</span></div>

                  <el-upload
                    class="avatar-uploaderer"
                    :action="importFileUrl"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload">
                    <img v-if="imageUrl" :src="imageUrl" class="avatar">
                    <div class="plusBGI"><img src="../common/images/addphoto.jpg" alt=""></div>
                    <!-- <i v-else class="el-icon-plus avatar-uploader-icon"></i> -->
                  </el-upload>
              </div>
              <!-- <div>
                  <p class="compandy-notice">身份证件：</p>
                  <p class="compandy-notice">请上传(<label>{{userInfo.username}}</label>)的身份证</p>
                  <el-upload
                    class="avatar-uploaderer"
                    :action="importFileUrl"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccesss"
                    :before-upload="beforeAvatarUpload">
                    <img v-if="imageUrlID" :src="imageUrlID" class="avatar">
                    <div class="plusBGI"><img src="../common/images/addphoto.jpg" alt=""></div>
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                  </el-upload>
              </div> -->
          </div>
          <div class="btn_big_red primary_add el-long-create-button" @click="NextStep">
              <button>申请验证</button>
          </div>
        <!-- <mt-button type="default" class="el-long-button el-long-create-button y-btn-red"  @click="NextStep">申请验证</mt-button> -->
          <div class="benefits">实名认证有什么好处？</div>
      </div>
    
	</div>
</template>
<script>
import setHeader from '../public/setHeader.vue';
import { MessageBox } from 'mint-ui';


export default {
	data() {
      return {
        importFileUrl:this.$path+'/api.php/upload/upimage',
        licenseImgPath: '',
        IDImgPath: '',
        imageUrl:'',
        imageUrlID: '',
        companyId:'',
        userInfo:'',
        companyName:''
      };
    },
    components: {
      setHeader,
    },
    created() {
        let that = this;
        that.userInfo = window.localStorage.getItem('userInfo');
        that.userInfo = JSON.parse(that.userInfo);
    },
    mounted() {
    	// let that = this;
    	// var a = Promise.resolve(this.getUserInfo())
      // a.then(
      //   function (result) { 
      //   that.userInfo = result;
      // })
      this.companyName = this.$route.query.companyName;
      this.companyId = this.$route.query.companyId;
      // this.companyName = this.$route.query.companyName;
    },
    
    methods:{
    	NextStep:function(){
    		let that = this;
    		// let companyId = that.companyId;
        let licenseImg = that.licenseImgPath;
        let IdCardImg = that.IDImgPath;
        let userId = that.userInfo.uid;
        let companyName = that.companyName;
    		if(licenseImg == '' || licenseImg == undefined){
    			// MessageBox('温馨提示', '请上传'+that.companyName+'的营业执照');
          // MessageBox('温馨提示', '请上传营业执照');
          that.$openDialog({
              src: require('../common/images/UI-08.png'),
              title: '温馨提示',
              message: '请上传营业执照',
              okText: '确定'
          });
    			return false;
    		}
			  // if(IdCardImg == '' || IdCardImg == undefined){
    		// 	// MessageBox('温馨提示', '请上传'+that.userInfo.username+'的身份证');
    		// 	MessageBox('温馨提示', '请上传身份证图片');
    		// 	return false;
    		// }
   			
   			//提交申请
   			// that.$fetch(that.$path + '/api.php/company/userCompanyAuth', {userId, companyName, licenseImg, IdCardImg}).then((response) => {
   			that.$fetch(that.$path + '/api.php/company/userCompanyAuth', {companyName, userId, licenseImg}).then((response) => {
          if(response.code == 200){
            let that = this;
              that.$openDialog({
                src: require('../common/images/UI-11.png'),
                title: '提交完成',
                message: '请等待审核通过',
                okText: '完成',
                callback (flag) {
                    if(flag) {
                      that.$router.push({path: '/userCenter'}); 
                        // var cpId = response.data.cp_id
                        // MessageBox.alert(response.msg).then(action => {
                        //   that.$router.push({path: '/userCenter/companyData', query: {cpId: cpId}}); 
                        //   // 应跳转至个人中心
                          
                        // }); 
                    }     
                }
              });
          }else{
            that.$openDialog({
                src: require('../common/images/UI-08.png'),
                title: '提交失败',
                message: response.msg,
                okText: '确定'
            });
            // MessageBox('温馨提示', response.msg);
            return false;
          } 
        })	
    	},
      handleAvatarSuccess(res, file) {
        this.licenseImgPath = res.headpath;
        this.imageUrl = URL.createObjectURL(file.raw);
      },
      handleAvatarSuccesss(res, file) {
        this.IDImgPath = res.headpath;
        this.imageUrlID = URL.createObjectURL(file.raw);
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isPNG = file.type === 'image/png';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG && !isPNG) {
          this.$message.error('上传头像图片只能是 JPG 或 PNG 格式!');
          return false;
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
          return false;
        }
      },
      showPicker(e){
        e.preventDefault(); //阻止输入法的唤醒
      },
      //跳过
      gotobtn() {
        this.$router.push({
          path: '/userCenter'
        })
      }
     
    }
}

</script>

<style>

/* 头部导航颜色 */
.certification .header_array_text_white {
  background-color: #fff;
  color: #000;
}
.certification .header_array_text_white .title_white {
  color: #333;
}

.el-long-create-button{
	margin-top: 0.5rem ;
  margin-bottom: -0.22rem;
}
/* #app{
  background: transparent;
}
.compandy-notice label{
    color: #cc0000;
} */
  /* 头部颜色透明 */
/* .mint-header{
  background-color: #fff !important;
}
.mint-header-title{
  overflow: visible ;
   color: #333333 ;
   font-size: 0.36rem ;
    font-family:SourceHanSansCN-Medium;
    font-weight:500;
    color:rgba(51,51,51,1);
    line-height: 0.36rem ;
}
a:-webkit-any-link{
  color:  #333333 ;
  font-size: 0.36rem ;
}
   .mint-cell-wrapper{
   padding-left:   0.3rem ;
   height: 0.94rem  ;
 }
 .mint-field-core{
   font-size: 0.28rem ;
   color: #C6C6C6 ;
 }
 .mint-button{
   height: initial;
 } */
 .mintui{
   font-size: 0.36rem ;
 }
 .compandy-notice{
   color: #333333 ;
   font-size: 0.28rem ;
   display: block;
   padding: 0.4rem 0;
   text-align: left ; 
   font-weight: 400 ;
 }
 .y-Certification{
   padding: 0 0.2rem;
   background-color: #fff;
 }
 .y-prompt{
   font-size: 0.22rem ;
   color: #999999 ;
   padding: 0 0.2rem ;
   text-align: left ;
 }
 .y-prompt span{
   text-align: left ;
 }
 .avatar-uploaderer{
   margin-top: 0.4rem;
   padding-bottom: 0.28rem;
 }
.avatar-uploaderer .el-upload {
    border: 0.01rem  dashed rgba(153,153,153,1);
    border-radius: 2px ;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    width: 3.8rem;
    height: 2.8rem;
}
.avatar-uploaderer img {
    width: 3.8rem;
    height: 2.8rem;
    border-radius: 2px;
}
.plusBGI{
  /* background: url('../common/images/addphoto.jpg') no-repeat; */
  /* background-size: 100% 100%;  */
  padding: 0.25rem 0.44rem ;
}
.plusBGI img{
  width: 100%;
  height: 100% ;
}
.benefits{
  font-size: 0.28rem ;
  color:#E50838 ;
  margin: 0.4rem 0 0.9rem ;
}

</style>